<template>
  <view class="ikz-bid">
    <ikz-loading :css-data="loading_css"></ikz-loading>
    <!-- list -->
    <ikz-topbg></ikz-topbg>
    <view class="ikz-orderdetail">
      <!-- <view class="ikz-tipss">
        <view class="ikz-tips-title" v-if="show_info.status == 0">
          待支付
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 1">
          待接单
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 2">
          待确认
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 7">
          待完成
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 3">
          已完成
        </view>
        <view class="ikz-tips-title" v-if="show_info.status == 4">
          已取消
        </view>
      </view> -->
      <view class="ikz-orderdetail-top">
        <!-- <view class="ikz-orderdetail-top-code">
          <view class="ikz-orderdetail-top-num">
            订单编号：{{ show_info.order_no }}
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 0">
            待支付
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 1">
            待接单
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 2">
            待确认
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 7">
            待完成
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 3">
            已完成
          </view>
          <view class="ikz-orderdetail-top-status" v-if="show_info.status == 4">
            已取消
          </view>
        </view> -->
        <view class="ikz-orderdetail-list-item">
          <view class="ikz-orderdetail-list-top">
            <view class="ikz-orderdetail-list-head">
              <image
                class="ikz-orderdetail-list-img"
                :src="show_info.avatar"
              ></image>
            </view>
            <view class="ikz-orderdetail-list-head-right">
              <view class="ikz-orderdetail-list-head-right-box">
                <view class="ikz-orderdetail-list-head-name">
                  {{ show_info.nickname }}
                </view>
                <view class="ikz-orderdetail-list-head-time">
                  {{ show_info.createtime }}
                </view>
              </view>
              <view class="ikz-orderdetail-list-head-right-box">
                <view class="ikz-orderdetail-list-head-card">
                  {{ show_info.type_text }}
                </view>
                <!-- <view style="font-size: 28rpx">
                  订单金额
                  <text style="color: #ff5722">￥{{ show_info.price }}</text>
                </view> -->
                <view style="font-size: 28rpx">
                  预估收益
                  <text class="ikz-orderdetail-list-head-price"
                    >￥{{ show_info.total_fee }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view
            class="ikz-orderdetail-list-content"
            v-if="show_info.information"
          >
            备注：{{ show_info.information }}
          </view>
        </view>

        <view
          class="ikz-orderdetail-other"
          v-if="
            (show_info.user_phone && show_info.status == 2) ||
            show_info.status == 7 ||
            show_info.status == 4
          "
        >
          <view
            class="ikz-detail-phone"
            @click="getPhone(show_info.user_phone)"
          >
            <image src="/static/phone.png" class="ikz-detail-phone-img"></image>
            顾客电话
          </view>
        </view>
        <view
          class="ikz-receive-box"
          v-if="
           
            show_info.super_goods.business_info.name
          "
        >
          <view
            class="ikz-detail-phone"
            @click="getPhone(show_info.super_goods.business_info.phone)"
          >
            <image src="/static/phone.png" class="ikz-detail-phone-img"></image>
            商家电话
          </view>
        </view>
      </view>
      <view class="ikz-orderdetail-other">
        <view class="ikz-orderdetail-other-title" v-if="show_info.down_url">
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title"> 下载链接 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.down_url }}
          </view>
        </view>
        <view
          class="ikz-orderdetail-other-title"
          v-if="show_info.receive_email"
        >
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title"> 收货邮箱 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.receive_email }}
          </view>
        </view>
        <view
          class="ikz-orderdetail-other-title"
          v-if="show_info.receive_limit"
        >
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title"> 抢单限制 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.receive_limit }}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.game_time">
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title"> 游戏时间 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.game_time }}
          </view>
        </view>
        <view
          class="ikz-orderdetail-other-title"
          v-if="show_info.game_platform"
        >
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot"></view>
            <view class="ikz-orderdetail-other-top-title"> 游戏名称 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.game_platform }}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.start">
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot"></view>
            <view class="ikz-orderdetail-other-top-title"> 取货地址 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.start }}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.destination">
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot1"></view>
            <view class="ikz-orderdetail-other-top-title"> 收货地址 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.destination }}
          </view>
        </view>

        <view
          class="ikz-orderdetail-other-title"
          v-if="show_info.lease_duration"
        >
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title"> 租借时长 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.lease_duration }}
          </view>
        </view>
        <view class="ikz-orderdetail-other-title" v-if="show_info.hope_arrive">
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot1"></view>
            <view
              class="ikz-orderdetail-other-top-title"
              v-if="show_info.type == 4"
            >
              预计交付时间
            </view>
            <view class="ikz-orderdetail-other-top-title" v-else>
              预计送达时间
            </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ show_info.hope_arrive }}
          </view>
        </view>
        <view
          class="ikz-orderdetail-other-title"
          v-if="show_info.hope_arrive && show_info.status == 2"
        >
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-orderdetail-other-top-title"> 抢单时间 </view>
          </view>
          <view class="ikz-orderdetail-other-content">
            {{ formatTimestamp(show_info.receive_time) }}
          </view>
        </view>

        <view
          class="ikz-orderdetail-other-title"
          v-if="show_info.hope_arrive && show_info.status == 2"
        >
          <view class="ikz-orderdetail-other-top">
            <view class="ikz-sticky-spot2"></view>
            <view class="ikz-orderdetail-other-top-title"> 配送状态： </view>
          </view>
          <view
            class="ikz-orderdetail-other-content"
            :style="{ color: overtimeInfo.color }"
          >
            {{ overtimeInfo.text }}
          </view>

          <view
            v-if="show_info.business_order_id > 0 && show_info.run_pay == 0"
            class="ikz-orderdetail-other-content"
            style="color: #ff6565; font-size: 24rpx; margin-top: 10rpx"
          >
            {{ "你已抢单，请及时支付垫付三分钟系统将会收回该订单" }}
          </view>
        </view>
      </view>

      <view
        class="ikz-take"
        v-for="(item, index) in show_info.express"
        :key="index"
      >
        <image class="ikz-take-img" src="/static/campus/box.png"></image>
        <view class="ikz-take-center">
          <view class="ikz-take-title">
            {{ item.type }}：￥{{ item.price }}
          </view>
          <view class="ikz-take-tips">
            {{ item.desc }}
          </view>
        </view>
        <view class="ikz-take-right">
          <view style="width: 50rpx; height: 50rpx"> </view>
          <view class="ikz-take-num">x{{ item.number || "" }}</view>
          <view style="width: 50rpx; height: 50rpx"> </view>
        </view>
      </view>

      <!-- <view class="ikz-tips" v-if="show_info.price">
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title"> 价格 </view>
          <view class="ikz-tips-price"> ￥{{ show_info.price }} </view>
        </view>
      </view> -->

      <!-- 商品信息 -->
      <view class="goods-info" v-if="show_info.super_goods.goods">
        <view
          class="goods-item"
          v-for="(item, index) in show_info.super_goods.goods"
          :key="index"
        >
          <image
            class="goods-image"
            :src="'https://dexinhebei.com/' + item.image"
          ></image>
          <view class="goods-detail">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-price">￥{{ item.price }}</text>
            <text class="goods-count">数量：{{ item.goods_count }}</text>
          </view>
        </view>
      </view>

      <view class="ikz-tips" v-if="show_info.reward">
        <view class="ikz-tips-item">
          <view class="ikz-tips-price-title"> 赏金 </view>
          <view class="ikz-tips-price"> ￥{{ show_info.reward }} </view>
        </view>
      </view>
      <view class="ikz-tips" v-if="show_info.remarks">
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title"> 备注信息 </view>
            <view class="ikz-tips-help-content">
              {{ show_info.remarks }}
            </view>
          </view>
        </view>
      </view>
      <view
        class="ikz-tips"
        v-if="
          show_info.annex_information_images &&
          show_info.annex_information_images.length
        "
      >
        <view class="ikz-tips-item">
          <view class="ikz-tips-help">
            <view class="ikz-tips-help-title"> 附件信息 </view>
            <view class="ikz-updata-bottom">
              <view
                class="ikz-updata-add"
                v-for="(item, index) in show_info.annex_information_images"
                :key="index"
              >
                <image
                  class="ikz-updata-img"
                  mode="aspectFill"
                  @click="showPic(show_info.annex_information_images, item)"
                  :src="item"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="ikz-bottom" v-if="show_info.status == 7">
        <div class="ikz-help-btn" style="background: #2196f3">
          已送达，等待顾客确认收货。
        </div>
      </view>

      <view class="ikz-bottom" v-if="show_info.status == 3">
        <div class="ikz-help-btn" style="background: #d6d6d6">已完成</div>
      </view>

      <view class="ikz-bottom" v-if="show_info.status == 4">
        <div class="ikz-help-btn" style="background: #d6d6d6">已取消</div>
      </view>

      <!-- <view
        class="ikz-sticky-btn"
        style="background: #d6d6d6"
        v-if="show_info.status == 4"
      >
        已取消
      </view> -->
      <!-- <view
        class="ikz-sticky-btn1"
        style="color: #ff6565; font-size: 24rpx; margin-top: 10rpx"
        v-if="show_info.run_goods_status == 1"
      >
        {{ "该订单已被骑手取消" }}
      </view>
      <view
        class="ikz-sticky-btn1"
        style="color: #ff6565; font-size: 24rpx; margin-top: 10rpx"
        v-if="show_info.run_goods_status == 2"
      >
        {{ "商家已确认收货" }}
      </view> -->
      <!-- 
      <div>
        <view
          class="ikz-sticky-btn1"
          v-if="show_info.status == 4 && show_info.run_business_status > 0"
        > <uni-icons
        type="info"
        size="16"
        color="#f40"
        style="margin-right: 5px"
      ></uni-icons>
          {{
            show_info.run_business_status == 1
              ? "用户已取消订单，已为你补偿双倍配送费，请将商品退回商家完成订单，否则无法正常退回垫付费用。"
              : "商家已确认收货，垫付已退回"
          }}
        </view>
      </div> -->

      <view class="ikz-bottom" v-if="show_info.status == 1">
        <view class="ikz-help-btn" @click="orderReceiving(show_info)"
          >抢单
        </view>
      </view>
      <view
        class="ikz-bottom"
        v-if="
          show_info.business_order_id > 0 &&
          show_info.run_pay == 0 &&
          show_info.status != 1
        "
      >
        <view
          class="ikz-help-btn"
          style="background: #4caf50"
          @click="payment1(show_info)"
          >支付垫付金
        </view>
      </view>

      <div v-if="show_info.super_goods">
        <view
          class="ikz-bottom"
          v-if="
            show_info.status == 2 &&
            (show_info.type == 1 || show_info.type == 2) &&
            !show_info.super_goods
          "
        >
          <view
            class="ikz-help-btn"
            style="background: #f40"
            @click="getCancellation1(show_info)"
            >取消订单
          </view>
        </view>
      </div>

      <div v-if="show_info.super_goods">
        <view
          class="ikz-bottom"
          v-if="
            show_info.is_run_pick == 1 &&
            show_info.run_goods_status == 0 &&
            show_info.status != 4 &&
            show_info.status != 7 &&
            show_info.status != 1 &&
            show_info.status != 3 &&
            show_info.business_order_id
          "
        >
          <view
            class="ikz-help-btn"
            style="background: #f40"
            @click="getCancellation(show_info)"
            >取消订单
          </view>
        </view>
      </div>

      <div v-if="show_info.super_goods">
        <view
          class="ikz-bottom"
          v-if="
            show_info.is_run_pick == 0 &&
            show_info.run_goods_status == 0 &&
            show_info.status != 4 &&
            show_info.status != 7 &&
            show_info.status != 1 &&
            show_info.status != 3 &&
            show_info.business_order_id
          "
        >
          <view
            class="ikz-help-btn"
            @click.stop="getCancellation(show_info)"
            style="background: #f40"
            >取消订单
          </view>
        </view>
      </div>

      <div
        v-if="
          show_info.status == 2 &&
          (show_info.type == 1 || show_info.type == 2) &&
          !show_info.super_goods
        "
      >
        <view
          class="ikz-bottom"
          @click.stop="orderService1(show_info.id, index, show_info)"
        >
          <div class="ikz-help-btn" style="background: #ff9800">确认送达</div>
        </view>
      </div>

      <div v-if="show_info.business_order_id">
        <view
          class="ikz-bottom"
          @click.stop="orderService(show_info.id, index, show_info)"
          v-if="
            show_info.status == 2 &&
            show_info.is_run_pick == 1 &&
            show_info.run_goods_status == 0 &&
            show_info.business_order_id > 0 &&
            show_info.run_pay > 0
          "
        >
          <div class="ikz-help-btn" style="background: #ff9800">确认送达</div>
        </view>
      </div>
      <div v-else>
        <view
          class="ikz-bottom"
          @click.stop="orderService(show_info.id, index, show_info)"
          v-if="
            show_info.status == 2 &&
            show_info.run_goods_status == 0 &&
            show_info.business_order_id > 0 &&
            show_info.run_pay > 0
          "
        >
          <div class="ikz-help-btn" style="background: #ff9800">确认送达</div>
        </view>
      </div>

      <view
        class="ikz-bottom"
        v-if="
          show_info.is_run_pick == 0 &&
          show_info.status != 4 &&
          show_info.status != 7 &&
          show_info.status != 1 &&
          show_info.status != 3 &&
          show_info.business_order_id &&
          show_info.business_order_id > 0 &&
          show_info.run_pay > 0
        "
        @click.stop="getGoods(show_info)"
      >
        <div class="ikz-help-btn" style="background: #76a8fd">确认取货</div>
      </view>
    </view>
    <!-- list -->
  </view>
</template>

<script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
import ikzOrderdetail from "@/pages/Component/Public/Orderdetail/public/orderdetail/orderdetail.vue";
import ikzTopbg from "@/pages/Component/Public/Topbg/public/topbg/topbg.vue";
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
    ikzOrderdetail,
    ikzTopbg,
  },
  props: {
    receiver: {
      type: String,
    },
  },
  data() {
    return {
      isReceiver: 0,
      id: "",
      loading_css: {
        display: "flex",
      },
      show_info: {},
      show_status: 2,
      // 模板id
      template_id: {},
      // 新增超时信息
      overtimeInfo: {
        text: "正常配送中",
        color: "green",
      },
      // 新增定时器
      overtimeTimer: null,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.detailInfo((res) => {
      this.loading_css.display = "none";
    });
    this.templateId();
  },
  onPullDownRefresh() {
    this.detailInfo((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onShow() {
    this.handleReceiver();
    if (this.show_status == 2) {
      this.show_status = 3;
    } else {
      this.detailInfo((res) => {
        this.loading_css.display = "none";
      });
    }
  },

  mounted() {
    this.startOvertimeCheck();
  },

  beforeDestroy() {
    this.clearOvertimeCheck();
  },
  onUnload() {
    // debugger;
    // 监听返回键事件
    uni.navigateTo({
      url: "/pages/Component/Module/Receiver/Program/order/index/index",
    });
    return true; // 阻止默认返回行为
  },
  methods: {
    formatDateTime(input) {
      // 使用正则表达式匹配日期和时间部分
      const match = input.match(
        /^(\d{4})-(\d{1,2})-(\d{1,2}) (\d{1,2}):(\d{2})-(\d{1,2}):(\d{2})$/
      );
      if (!match) {
        return input; // 如果不是目标格式，直接返回原字符串
      }

      // 提取年、月、日和时间部分
      const [_, year, month, day, startHour, startMinute, endHour, endMinute] =
        match;

      // 格式化月份和日期为两位数
      const formattedMonth = String(month).padStart(2, "0");
      const formattedDay = String(day).padStart(2, "0");

      // 格式化时间部分
      const formattedStartHour = String(startHour).padStart(2, "0");
      const formattedEndHour = String(endHour).padStart(2, "0");

      // 返回格式化后的字符串
      return `${year}-${formattedMonth}-${formattedDay} ${formattedStartHour}:${startMinute}-${formattedEndHour}:${endMinute}`;
    },
    // 新增方法：启动超时检查
    startOvertimeCheck() {
      this.overtimeTimer = setInterval(() => {
        if (this.show_info.receive_time && this.show_info.hope_arrive) {
          this.calculateOverTime(
            this.show_info.receive_time,
            this.formatDateTime(this.show_info.hope_arrive)
          );
        }
      }, 1000); // 每秒检查一次
    },

    // 新增方法：清除定时器
    clearOvertimeCheck() {
      if (this.overtimeTimer) {
        clearInterval(this.overtimeTimer);
        this.overtimeTimer = null;
      }
    },
    formatTimestamp(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp * 1000);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    //骑手取货
    getGoods(item) {
      const _this = this;
      // 判断给钱了吗
      if (item.business_order_id > 0 && item.run_pay == 0) {
        uni.showModal({
          title: "提示",
          content: "该订单需要垫付，请支付后取货",
          success(res) {
            if (res.confirm) {
              _this.payment(item);
            }
          },
        });
        return;
      }
      this.quhuo(item);
    },
    quhuo(item) {
      const _this = this;
      uni.showModal({
        title: "取件码",
        content: "",
        editable: true,
        success(res) {
          if (res.confirm) {
            if (!res.content || res.content.trim() === "") {
              uni.showToast({
                title: "取件码不能为空",
                icon: "none",
                duration: 2000,
              });
              return;
            }
            // console.log(item, "item", res.content);
            var path = "/xyb/order/pickCode";
            var data = {
              id: item.id,
              run_pick_code: res.content,
            };
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "取件成功",
                  duration: 2000,
                });
                _this.$emit("loadMore");
                _this.$forceUpdate();
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                });
              }
            });
          }
        },
      });
    },
    // 判断是否是抢单员
    handleReceiver() {
      // // 判断是否需要垫付,以及骑手是否支付了
      //     if(item.business_order_id == 0 && item.run_pay == 0){
      //       uni.showModal({
      //         title: '提示',
      //         content: '该订单需要垫付，请支付后抢单'
      //       })
      //       return;
      //     }

      var path = "/xyb/user/is_receiver";
      var url = app.globalData.adminPath + path;
      var data = {
        app_plat: "MP-WEIXIN",
        token: uni.getStorageSync("local_user_session"),
        agent_id: uni.getStorageSync("default_agent").id || "",
      };
      if (data.token) {
        uni.request({
          url: url,
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          data: data,
          method: "POST",
          success: (res) => {
            console.log("是否为抢单员", res.data.data.is_receiver);
            uni.setStorageSync("receivers", res.data.data.is_receiver);
            this.isReceiver = res.data.data.is_receiver;
          },
          fail: function (res) {
            //调用接口失败或回传失败
            uni.showModal({
              title: "服务器繁忙",
              content: "服务器繁忙或网络不稳定，请稍后再试！",
            });
          },
        });
      }
    },
    showPic(urls, current) {
      wx.previewImage({
        current: current, // 当前显示图片的http链接
        urls: urls, // 需要预览的图片http链接列表
      });
    },
    //拨打电话
    getPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    calculateOverTime(receiveTime, hopeArrive) {
      // console.log(receiveTime, hopeArrive, "ddddddddddd");
      // 如果缺少必要参数，返回默认值
      if (!receiveTime || !hopeArrive)
        return { text: "正常配送中", color: "green" };

      // 解析预计送达时间范围
      const [date, timeRange] = hopeArrive.split(" ");
      const [startTime, endTime] = timeRange.split("-");

      // 构造预计送达时间结束点
      const hopeArriveEndDate = new Date(`${date}T${endTime}:00`);
      const now = new Date();

      // 如果当前时间小于预计送达时间结束点，返回正常配送中
      if (now < hopeArriveEndDate)
        return { text: "正常配送中...", color: "green" };

      // 计算超时时间
      const diff = now - hopeArriveEndDate;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor(
        (diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);

      let result = "已超时：";

      // console.log(days, hours, minutes, seconds, "222222222");

      if (days > 0) result += `${days}天`;
      if (hours > 0) result += `${hours}小时`;
      if (minutes > 0) result += `${minutes}分钟`;
      if (seconds > 0) result += `${seconds}秒`;

      this.overtimeInfo = { text: result, color: "#FF5722" };
    },
    //请求页面数据
    detailInfo(fn) {
      var path = "/xyb/order/detail";
      var data = {
        id: this.id,
      };
      ikz.post(path, data, (res) => {
        console.log(111);
        if (res.data.code) {
          this.show_info = res.data.data;

          if (
            this.show_info.status == 2 ||
            this.show_info.status == 7 ||
            this.show_info.status == 3
          ) {
            this.privacy_info();
          }
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    //查看隐私数据
    privacy_info() {
      var path = "/xyb/order/receiver_order_detail";
      var data = {
        orderid: this.id,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          if (res.data.data.annex_information_images) {
            this.show_info.annex_information_images =
              res.data.data.annex_information_images;
          }
          if (res.data.data.information) {
            this.show_info.information = res.data.data.information;
          }
          if (res.data.data.game_id) {
            this.show_info.game_id = res.data.data.game_id;
          }
          if (res.data.data.user_mobile) {
            this.show_info.user_mobile = res.data.data.user_mobile;
          }
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    orderService1(item) {
      var _this = this;
      var path = "/xyb/order_receive/receive_confirm_arrive";
      var data = {
        orderid: this.id,
      };

      // // var that = this;
      // var path = "/xyb/order_receive/receive_confirm_arrive";
      // var data = {
      //   orderid: this.id,
      // };
      // const _this = this;
      // if (item.business_order_id > 0 && item.run_pay == 0) {
      //   uni.showModal({
      //     title: "提示",
      //     content: "该订单需要垫付，请支付后抢单",
      //     success(res) {
      //       if (res.confirm) {
      //         _this.payment(item);
      //       }
      //     },
      //   });
      //   return;
      // }

      ikz.post(path, data, (res) => {
        if (res.data.code) {
          uni.showToast({
            title: "送达成功",
            duration: 2000,
          });
          _this.detailInfo((res) => {
            // _this.detailInfo();
          });
          // setTimeout(function(){
          //   uni.navigateBack({
          //       delta: 1
          //   });
          // },2000)
          _this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    orderService(item) {
      // var that = this;
      var path = "/xyb/order_receive/receive_confirm_arrive";
      var data = {
        orderid: this.id,
      };
      const _this = this;
      if (item.business_order_id > 0 && item.run_pay == 0) {
        uni.showModal({
          title: "提示",
          content: "该订单需要垫付，请支付后抢单",
          success(res) {
            if (res.confirm) {
              _this.payment(item);
            }
          },
        });
        return;
      }

      ikz.post(path, data, (res) => {
        if (res.data.code) {
          uni.showToast({
            title: "送达成功",
            duration: 2000,
          });
          _this.detailInfo((res) => {
            // _this.detailInfo();
          });
          // setTimeout(function(){
          //   uni.navigateBack({
          //       delta: 1
          //   });
          // },2000)
          _this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    //获取模板参数
    templateId(fn) {
      var path = "/xyb/wechat_mini_push/template_id_list";
      var data = {};
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.template_id = res.data.data;
          console.log("template_id的值", this.template_id);
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        fn();
      });
    },
    getCancellation1(item) {
      const _this = this;
      uni.showModal({
        title: "确认取消",
        content: "确认取消订单吗？",
        success(res) {
          if (res.confirm) {
            var path = "/xyb/order/runCancel";
            var data = {
              id: item.id,
            };
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "取消成功",
                  duration: 2000,
                });
                _this.detailInfo((res) => {
                  // _this.detailInfo();
                });
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                });
              }
            });
          }
        },
      });
    },
    getCancellation(item) {
      const _this = this;
      uni.showModal({
        title: "确认取消",
        content:
          item.run_pay == 1
            ? "确认取消订单吗？取消订单将会扣除20%的垫付金额"
            : "确认取消订单吗？",
        success(res) {
          if (res.confirm) {
            var path = "/xyb/order/runCancel";
            var data = {
              id: item.id,
            };
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "取消成功",
                  duration: 2000,
                });
                _this.detailInfo((res) => {
                  // _this.detailInfo();
                });
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                });
              }
            });
          }
        },
      });
    },

    // 调起小程序微信支付
    payment1(item) {
      // console.log(this.show_info.id,this.show_info.super_goods.total_fee,'this.show_infothis.show_info');
      const _this = this;
      if (item.run_pay == 0) {
        uni.showLoading({
          mask: true,
          title: "正在请求支付...",
        });
        var path = "/xyb/order/run_wx_minapp_pay";
        var data = {
          orderid: item.id,
          amount: item.super_goods.total_fee,
        };
        ikz.post(path, data, (res) => {
          console.log("调起小程序微信支付 ", res);
          uni.hideLoading();
          if (res.data.code == 1) {
            wx.requestPayment({
              timeStamp: res.data.data.timeStamp,
              nonceStr: res.data.data.nonceStr,
              package: res.data.data.package,
              signType: res.data.data.signType,
              paySign: res.data.data.paySign,
              success: (res) => {
                console.log("success", res);
                if (res.errMsg == "requestPayment:ok") {
                  uni.showToast({
                    title: "支付成功",
                    duration: 2000,
                    icon: "success",
                  });
                  _this.detailInfo((res) => {
                    // _this.detailInfo();
                  });
                }
              },
              fail: (res) => {
                uni.showModal({
                  title: "提示",
                  showCancel: false,
                  content: "订单已创建，请及时进行支付",
                });
              },
              complete: (res) => {
                console.log("complete", res);
              },
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
            });
          }
        });
        return;
      }
    },
    //帮助他
    orderReceiving(item) {
      //   console.log("抢单", this.show_info, "...");
      // 判断是否需要垫付,以及骑手是否支付了
      // if (
      //   this.show_info.business_order_id > 0 &&
      //   this.show_info.run_pay == 0
      // ) {
      //   uni.showModal({
      //     title: "提示",
      //     content: "该订单需要垫付，请支付后抢单",
      //   });
      //   return;
      // }

      var that = this;
      //订阅消息
      var temp_id = [this.template_id.order_complete];
      uni.requestSubscribeMessage({
        tmplIds: temp_id,
        success(res) {
          that.subimt(item);
        },
        fail(res) {
          if (res.errCode == 20004) {
            uni.showModal({
              title: "提示",
              content: "请前往设置打开接受通知",
              confirmText: "确定",
              success(res) {
                that.subimt(item);
              },
            });
          } else {
            uni.showModal({
              title: "提示",
              content: "未订阅消息，无法接收到订单通知",
              confirmText: "确定",
              success(res) {
                that.subimt(item);
              },
            });
          }
        },
      });
    },

    // 调起小程序微信支付
    payment(item) {
      // console.log(this.show_info.id,this.show_info.super_goods.total_fee,'this.show_infothis.show_info');
      const _this = this;
      if (this.show_info.run_pay == 0) {
        // this.$emit('typeInfo');
        uni.showModal({
          title: "提示",
          content: "该订单需要骑手垫付，是否前往支付？",
          success: function (res) {
            if (res.confirm) {
              uni.showLoading({
                mask: true,
                title: "正在请求支付...",
              });
              var path = "/xyb/order/run_wx_minapp_pay";
              var data = {
                orderid: _this.show_info.id,
                amount: _this.show_info.super_goods.total_fee,
              };
              ikz.post(path, data, (res) => {
                console.log("调起小程序微信支付 ", res);
                uni.hideLoading();
                if (res.data.code == 1) {
                  wx.requestPayment({
                    timeStamp: res.data.data.timeStamp,
                    nonceStr: res.data.data.nonceStr,
                    package: res.data.data.package,
                    signType: res.data.data.signType,
                    paySign: res.data.data.paySign,
                    success: (res) => {
                      console.log("success", res);
                      if (res.errMsg == "requestPayment:ok") {
                        uni.showToast({
                          title: "支付成功",
                          duration: 2000,
                          icon: "success",
                        });

                        _this.detailInfo((res) => {
                          // _this.detailInfo();
                        });

                        // _this.detailInfo();
                      }
                    },
                    fail: (res) => {
                      // uni.showModal({
                      //   title: "提示",
                      //   showCancel: false,
                      //   content: "订单已创建，请及时进行支付",
                      // });

                      _this.detailInfo((res) => {
                        // _this.detailInfo();
                      });
                    },
                    complete: (res) => {
                      console.log("complete", res);
                    },
                  });
                } else {
                  uni.showToast({
                    title: res.data.msg,
                    icon: "none",
                  });
                }
              });
            }
          },
        });
        return;
      }
    },

    // 帮助
    subimt(item) {
      var that = this;
      var path = "/xyb/order_receive/add";
      var data = {
        orderid: this.id,
      };
      // this.payment();
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          uni.showToast({
            title: "抢单成功",
            duration: 2000,
          });
          that.detailInfo((res) => {
            if (item.business_order_id) {
              that.payment();
            } else {
              uni.redirectTo({
                url: "/pages/Component/Module/Receiver/Program/home/index/index",
              });
            }
          });
          // setTimeout(function(){
          //   uni.navigateBack({
          //       delta: 1
          //   });
          // },2000)
          that.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 颜色变量 */
$primary-color: #FBAB7E;
$secondary-color: #F8C66D;
$text-color: #333;
$light-text: #666;
$white: #fff;
$bg-color: #f5f7fa;
$card-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
$border-radius: 16rpx;

page {
  width: 100%;
  height: 100%;
  background: $bg-color;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 全局样式重置 */
view {
  box-sizing: border-box;
}

/* 顶部背景 */
.ikz-top-bg {
  position: relative;
  height: 280rpx;
  overflow: hidden;
  
  &-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 订单详情容器 */
.ikz-orderdetail {
  padding: 20rpx;
  position: relative;
  z-index: 2;
}

/* 卡片通用样式 */
.ikz-orderdetail-top,
.ikz-orderdetail-other,
.ikz-tips,
.ikz-take,
.goods-info {
  background: $white;
  border-radius: $border-radius;
  box-shadow: $card-shadow;
  margin-bottom: 24rpx;
  overflow: hidden;
}

/* 订单头部信息 */
.ikz-orderdetail-top {
  padding: 30rpx;
  
  &-code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  &-num {
    font-size: 28rpx;
    color: $light-text;
  }
  
  &-status {
    padding: 10rpx 20rpx;
    background: linear-gradient(to right, $primary-color, $secondary-color);
    color: $white;
    font-size: 28rpx;
    border-radius: 40rpx;
  }
}

/* 订单列表项 */
.ikz-orderdetail-list-item {
  padding: 30rpx;
}

.ikz-orderdetail-list-top {
  display: flex;
  align-items: center;
}

.ikz-orderdetail-list-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  object-fit: cover;
}

.ikz-orderdetail-list-head-right {
  margin-left: 24rpx;
  flex: 1;
}

.ikz-orderdetail-list-head-right-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ikz-orderdetail-list-head-name {
  font-size: 32rpx;
  font-weight: 500;
  color: $text-color;
}

.ikz-orderdetail-list-head-time {
  font-size: 24rpx;
  color: $light-text;
}

.ikz-orderdetail-list-head-card {
  background: $primary-color;
  color: $white;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.ikz-orderdetail-list-head-price {
  color: #FF5722;
  font-weight: bold;
}

.ikz-orderdetail-list-content {
  margin-top: 20rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: $text-color;
}

/* 其他信息区域 */
.ikz-orderdetail-other {
  padding: 0 30rpx;
}

.ikz-orderdetail-other-title {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.ikz-orderdetail-other-top {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.ikz-orderdetail-other-top-title {
  font-size: 28rpx;
  color: $light-text;
}

.ikz-orderdetail-other-content {
  font-size: 28rpx;
  color: $text-color;
  line-height: 1.6;
}

/* 快递信息 */
.ikz-take {
  padding: 30rpx;
  display: flex;
  align-items: center;
  
  &-img {
    width: 80rpx;
    height: 80rpx;
  }
  
  &-center {
    flex: 1;
    margin: 0 24rpx;
  }
  
  &-title {
    font-size: 30rpx;
    color: $text-color;
    margin-bottom: 8rpx;
  }
  
  &-tips {
    font-size: 24rpx;
    color: $light-text;
  }
  
  &-right {
    display: flex;
    align-items: center;
  }
  
  &-num {
    font-size: 28rpx;
    color: $text-color;
  }
}

/* 商品信息 */
.goods-info {
  padding: 30rpx;
  
  .goods-item {
    display: flex;
    padding: 20rpx 0;
    
    &:not(:last-child) {
      border-bottom: 1rpx solid #f0f0f0;
    }
  }
  
  .goods-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 12rpx;
    margin-right: 24rpx;
    object-fit: cover;
  }
  
  .goods-detail {
    flex: 1;
  }
  
  .goods-name {
    font-size: 30rpx;
    color: $text-color;
    font-weight: 500;
    margin-bottom: 12rpx;
    display: block;
  }
  
  .goods-price {
    font-size: 32rpx;
    color: #FF5722;
    font-weight: bold;
    margin-bottom: 12rpx;
    display: block;
  }
  
  .goods-count {
    font-size: 26rpx;
    color: $light-text;
    background: #f5f5f5;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    display: inline-block;
  }
}

/* 底部按钮 */
.ikz-bottom {
  padding: 30rpx;
  display: flex;
  justify-content: center;
}

.ikz-help-btn {
  width: 80%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  color: $white;
  background: $primary-color;
  border-radius: 45rpx;
  box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.3);
  transition: all 0.3s;
  
  &:active {
    opacity: 0.8;
    transform: translateY(2rpx);
  }
  
  &[style*="background: #4caf50"] {
    background: #4CAF50 !important;
    box-shadow: 0 4rpx 12rpx rgba(#4CAF50, 0.3);
  }
  
  &[style*="background: #f40"] {
    background: #FF5722 !important;
    box-shadow: 0 4rpx 12rpx rgba(#FF5722, 0.3);
  }
  
  &[style*="background: #ff9800"] {
    background: #FF9800 !important;
    box-shadow: 0 4rpx 12rpx rgba(#FF9800, 0.3);
  }
  
  &[style*="background: #76a8fd"] {
    background: #2196F3 !important;
    box-shadow: 0 4rpx 12rpx rgba(#2196F3, 0.3);
  }
  
  &[style*="background: #d6d6d6"] {
    background: #9E9E9E !important;
    box-shadow: 0 4rpx 12rpx rgba(#9E9E9E, 0.3);
  }
}

/* 提示信息 */
.ikz-tips {
  padding: 0 30rpx;
  
  &-item {
    padding: 30rpx 0;
    position: relative;
    
    &:not(:last-child)::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1rpx;
      background: #f0f0f0;
    }
  }
  
  &-price-title {
    font-size: 28rpx;
    color: $light-text;
  }
  
  &-price {
    font-size: 32rpx;
    color: #FF5722;
    font-weight: bold;
  }
  
  &-help-title {
    font-size: 28rpx;
    color: $light-text;
    margin-bottom: 16rpx;
  }
  
  &-help-content {
    font-size: 28rpx;
    color: $text-color;
    line-height: 1.6;
  }
}

/* 上传图片 */
.ikz-updata-bottom {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.ikz-updata-add {
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.ikz-updata-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  object-fit: cover;
}

/* 电话按钮 */
.ikz-detail-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  background: #2196F3;
  color: $white;
  font-size: 28rpx;
  border-radius: $border-radius;
  
  &-img {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
  }
}

/* 状态点 */
.ikz-sticky-spot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  
  &1 {
    background: #FF9800;
  }
  
  &2 {
    background: #4CAF50;
  }
  
  &:not(.ikz-sticky-spot1):not(.ikz-sticky-spot2) {
    background: #2196F3;
  }
}

/* 响应式调整 */
@media (max-width: 375px) {
  .ikz-orderdetail-list-img {
    width: 70rpx;
    height: 70rpx;
  }
  
  .ikz-orderdetail-list-head-name {
    font-size: 28rpx;
  }
  
  .ikz-help-btn {
    width: 90%;
    height: 80rpx;
    line-height: 80rpx;
  }
}
</style>